<template>
  <div class="parent-component">
    <h1>父组件</h1>

    <!-- 表单输入，用于输入要发送给子组件的内容 -->
    <div class="input-section">
      <input v-model="inputContent" placeholder="输入内容..." />
      <button @click="sendToChild">发送到子组件</button>
    </div>

    <!-- 显示子组件返回的点击内容 -->
    <div class="clicked-content">你点击了: {{ clickedContent }}</div>

    <!-- 子组件，传递内容和插槽 -->
    <ChildComponent
      ref="childComponent"
      :content="contentToSend"
      @content-clicked="handleChildClick"
    >
      <!-- 插槽内容 -->
      <template #default>
        <p>父组件的插槽内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script setup lang="ts">
import ChildComponent from './SonsonDemo/ChildComponent.vue'
import { debounce } from 'lodash'
import { ref, useTemplateRef, watch } from 'vue'

const inputContent = ref('')
const contentToSend = ref(['项目一', '项目二'])
const childComponent = useTemplateRef('childComponent')

const sendToChild = () => {
  if (inputContent.value.trim()) {
    contentToSend.value.push(inputContent.value.trim())
    console.log('子组件内容长度:', childComponent.value?.contentLength)
    inputContent.value = ''
  }
}
watch(
  () => inputContent.value,
  debounce((newValue) => {
    console.log('用户输入:', newValue)
  }, 200)
)
const clickedContent = ref('')
const handleChildClick = (val: any) => {
  clickedContent.value = val
}
</script>

<style lang="scss" scoped>
.parent-component {
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  width: 400px;
  margin: 0 auto;
}

.input-section {
  margin-bottom: 20px;
}

.input-section input {
  padding: 8px;
  width: 70%;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-section button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

.input-section button:hover {
  background-color: #0056b3;
}

.clicked-content {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
</style>
